import React from 'react';
import { Card,Row,Col,Steps, Modal, Button, Collapse, Form, Input,InputNumber, Radio,DatePicker,Spin ,Table} from 'antd';
import './index.less';
import Utils from './../../../utils/utils';
import Axios from "../../../axios";

export default class TrainPlanCarryoutDetails extends React.Component{
    state = {
        columns: [{
            title: '用户',
            dataIndex: 'userName',
        },{
            title: '签到来源',
            dataIndex: 'type',
            render(type){
                let config = {
                    'APP_SCAN':'APP扫码',
                    'MANUALLY':'手动录入',
                }
                return config[type];
            }
        },{
            title: '备注信息',
            dataIndex: 'remark',
        },{
            title: '签到时间',
            dataIndex: 'createTime',
        },],
    }
    componentDidMount(){
        //获取id
        let id = this.props.match.params.id;
        if(id){
            console.log(id);
            let params = {
                id:id
            }
            this.detaislRequest(params);
        }
    }
    /*岗位授权审批记录详情请求*/
    detaislRequest = (params)=>{
        let _this = this;
        this.setState({
            loading:true,
            loadingTxt:'数据请求中...'
        })
        Axios.dataRequest({
            block:'/hr',
            url:'/userTrain/train/detail',
            params:params,
        }).then((data)=>{
            console.log(data)
            const details = data.data;
            let approvalData = details.approvalData?JSON.parse(details.approvalData):[];
            //console.log(approvalData);
            let _params = {
                trainId:details.id
            }
            _this.signInRequest(_params);
            this.setState({
                loading:false,
                details,
                approvalData
            })
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    /*签到列表*/
    signInRequest = (params)=>{
        this.setState({
            loading:true,
            loadingTxt:'数据请求中...'
        })
        Axios.dataRequest({
            block:'/hr',
            url:'/userTrain/trainCheckin',
            params:params,
        }).then((data)=>{
            console.log(data)
            let signInItems = data.data;
            signInItems.map((item)=>{
                item.key = item.id;
                return item;
            })
            this.setState({
                loading:false,
                signInItems
            })
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    render(){
        /*WAIT_APPROVAL("WAIT_APPROVAL", "待审核", 1),
        APPROVAL_ING("APPROVAL_ING", "审核中", 2),
        APPROVAL_PASS("APPROVAL_PASS", "审核通过", 3),
        APPROVAL_REFUSE("APPROVAL_REFUSE", "审核拒绝", 4),*/
        const details = this.state.details||{};
        // const impowerItems = this.state.impowerItems||[];
        const approvalData = this.state.approvalData||[];
        return(
            <Spin spinning={this.state.loading} size="large" tip={this.state.loadingTxt}>
                <div className="con-box common-details">
                    <Card
                        title="培训计划实施详情"
                        bordered={false}
                    >
                        <Row>
                            <Col sm={8} className="item"><span className="title">培训标题：</span><span className="details">{details.title?details.title:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">编号：</span><span className="details">{details.trainNo?details.trainNo:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">培训内容摘要：</span><span className="details">{details.synopsis?details.synopsis:"—"}</span></Col>
                        </Row>
                        <Row>
                            <Col sm={8} className="item"><span className="title">培训内容：</span><span className="details">{details.content?details.content:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">培训老师：</span><span className="details">{details.teacher?details.teacher:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">培训负责人：</span><span className="details">{details.principal?details.principal:"—"}</span></Col>
                        </Row>
                        <Row>
                            <Col sm={8} className="item"><span className="title">培训时间：</span><span className="details">{details.trainTime?details.trainTime:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">培训地点：</span><span className="details">{details.location?details.location:"—"}</span></Col>
                        </Row>
                        <Row>
                            <Col sm={8} className="item"><span className="title">培训方式：</span><span className="details">{details.type?details.type:"—"}</span></Col>
                            <Col sm={8} className="item"><span className="title">状态：</span><span className="details">
                                {details.state == "VALID" ? <span className="txt-success">审批通过</span> : ''}
                                {details.state == "INVALID" ? <span className="txt-danger">审批拒绝</span> : ''}
                                {details.state == "DISABLE" ? <span className="txt-danger">禁用的</span> : ''}
                                {details.state == "DELETE" ? <span className="txt-danger">删除的</span> : ''}
                                {details.state == "WAIT_AUDIT" ? <span className="txt-danger">待审核</span> : ''}
                                {details.state == "UNDER_REVIEW" ? <span className="txt-danger">审核中</span> : ''}
                            </span></Col>
                        </Row>
                        <Row>
                            <Col sm={24} className="item"><span className="title">审批详情：</span><span className="details">
                                {
                                    approvalData.length?
                                        <div>
                                            {
                                                approvalData.map((item,index)=>{
                                                    return <div key={index} style={{padding:"5px 15px",}}>
                                                        <div><span className="txt-primary">审批流程{index+1}</span></div>
                                                        <div>审批标题：{item.title}</div>
                                                        <div>审批用户：{item.userName}</div>
                                                        <div>审批意见：{item.explain}</div>
                                                        <div>审批时间：{item.approvalTime}</div>
                                                        <div>审批状态：
                                                            {item.state=="WAIT_APPROVAL"?<span className="txt-danger">待审核</span>:""}
                                                            {item.state=="APPROVAL_ING"?<span className="txt-danger">审核中</span>:""}
                                                            {item.state=="APPROVAL_PASS"?<span className="txt-success">审核通过</span>:""}
                                                            {item.state=="APPROVAL_REFUSE"?<span className="txt-danger">审核拒绝</span>:""}
                                                        </div>
                                                    </div>
                                                })
                                            }
                                        </div>
                                        :"无"
                                }
                            </span></Col>
                        </Row>
                        <div>
                            <div className="title" style={{marginBottom:15}}>签到列表：</div>
                            <Table
                                bordered
                                columns={this.state.columns}
                                dataSource={this.state.signInItems}
                                pagination = {false}
                            />
                        </div>
                    </Card>
                </div>
            </Spin>
        )
    }
}

